<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import CyclicRolling from "./components/CyclicRolling.vue";

const topList = [
  { id: 1, name: "第一次坐飞机要注意什么?", icon: "🤔" },
  { id: 2, name: "飞机延误了怎么办?", icon: "✈" },
  { id: 3, name: "充电宝可以托运吗?", icon: "🧳" },
  { id: 4, name: "深圳到香港九龙的火车票", icon: "🚊" },
  { id: 5, name: "广州飞北京机票", icon: "✈" },
];
const bottomList = [
  { id: 1, name: "CA824602的航班动态?", icon: "📊" },
  { id: 2, name: "D33226火车车次查询", icon: "🚉" },
  { id: 3, name: "火车票要提前多久购买?", icon: "⏰" },
  { id: 4, name: "没带身份证可以乘坐飞机吗?", icon: "🪪" },
];
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>

    <CyclicRolling :topList="topList" :bottomList="bottomList" />
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
